<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<!--
    vue的生命周期 :      8个生命周期函数  钩子函数
    初始化阶段:
          beforeCreate() :  实例只完成了事件和生命周期函数的初始化
          created():        实例已经完成了数据代理等操作
          beforeMount():    模板翻译已经完成,但是尚未替换
          mounted()         模板翻译已经完成同时完成替换
    运行阶段:
         beforeUpdate():        data数据已经改变,但页面中的数据尚未重新渲染
         updated():             data数据已经改变,页面中的数据重新渲染完成
   销毁阶段:
      beforeDestroy()
     destroyed()        当vue实例销毁时   以上两个函数会被自动调用   事件监听  data的监视全部无效
-->
<div id="app">
    <input type="text" v-model="info">
   <h1 id="info">{{info}}</h1>
</div>

<script>
  let vm = new Vue({
      el:'#app',
      data:{
          info:'hello  vue'
      },
      methods:{},
      beforeCreate(){
          console.log("------ beforeCreate------")
          console.log("info="+this.info)
      },
      created(){
          console.log("------created------")
          console.log("info="+this.info)
      },
      beforeMount(){
          console.log("------ beforeMount------")
          let info =   document.getElementById("info").innerHTML
          console.log("info="+info)
      },
      mounted(){
          console.log("------  mounted------")
          let info =   document.getElementById("info").innerHTML
          console.log("info="+info)
      },
      beforeUpdate(){
          console.log("------beforeUpdate------")
          let info =   document.getElementById("info").innerHTML
          console.log("info="+info)
      },
      updated(){
          console.log("------updated------")
          let info =   document.getElementById("info").innerHTML
          console.log("info="+info)
      },
      beforeDestroy(){
          console.log("------beforeDestroy------")
      },
     destroyed(){
          console.log("------destroyed------")
      }
    })
</script>
</body>
</html>